<!-- <template>
  <div>
    <h4>{{ fullName }}</h4>
    <button @click="changeName">修改firstName</button>
  </div>
</template>

<script>
import { ref, computed } from "vue";

export default {
  name: "CustomRefAPI",
  setup() {
    const firstName = ref("Kobe");
    const lastName = ref("Bryant");
    const fullName = computed(() => firstName.value + lastName.value);
    const changeName = () => {
      firstName.value = "James";
    };
    return {
      fullName,
      changeName,
    };
  },
};
</script>
!-->

<template>
  <div>
    <h4 ref="titleRef">123</h4>
  </div>
</template>

<script>
// import useDebounceRef from "@/hooks/useDebounceRef";
import { ref, watchEffect } from "vue";

export default {
  name: "CustomRefAPI",
  setup() {
    const titleRef = ref(null);
    watchEffect(
      () => {
        console.log(titleRef.value);
      },
      {
        flush: "post",
      }
    );
    return {
      titleRef,
    };
  },
};
</script>
